import React, { Component } from 'react';
import './index.css'
import  auther from '../../assets/images/auther.png'
import { withRouter } from 'react-router-dom'
class BookClassList extends Component {
    
    render() {
        const { list } = this.props
        return (
                <div className="bookclasslist-container" ref="refScroll">
                    {
                        list.map((item,index) =>{
                            return(
                                <div className="bookclasslist-box" key={item.book_id} onClick={this.goBookInfo(item.book_id)}>
                                    <div className="bookclasslist-pic">
                                        <img src={item.cover_url} alt="" />
                                    </div>
                                    <div className="bookclasslist-content">
                                        <div  className="bookclasslist-content-name">{item.book_name}</div>
                                        <div  className="bookclasslist-content-auther-all">
                                            <div className="content-auther-all-left">
                                                <img src={auther} alt="" />  {item.author_name}
                                            </div>
                                            <div className="content-auther-all-right">
                                                <span  style={ item.month_vip == 0 ? {display:'none'} : {display:'inline-block'}}>包月</span>
                                                <span style={ item.is_finish == 'N'? {display:'inline-block'}:{display:'none'} }>连载</span>
                                                <span style={ item.is_finish == 'Y'? {display:'inline-block'}:{display:'none'} }>完结</span>
                                            </div>
                                        </div>
                                        <div  className="bookclasslist-content-txt">
                                            {item.description}
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
             
        );
    }

   goBookInfo = (Id) =>{
        return () =>{
            this.props.history.push({
                pathname: '/detail/' + Id,
                state: {
                    Id
                }
            })
           
            
        }
   }
   
}

export default withRouter(BookClassList) ;